<template>
  <el-table
    class="version-table"
    :data="getListData"
    :span-method="objectSpanMethod"
    border
    style="width: 700px; margin-top: 10px"
  >
    <el-table-column v-for="(item, index) in getModelData" :key="index" align="center" :label="item.label" :prop="item.prop" v-if="!item.isbtn" :min-width="item.width"></el-table-column>
    <el-table-column v-else-if="item.isbtn&&!readonly" :label="item.label" align="center" :min-width="item.width">
      <template slot-scope="scope">
        <div> 
          <span v-for="(btn, btnIndex) in item.btns" :key="btnIndex" :class="btn.class+' hover ft12'" @click="doClick(btn,scope)">
            {{btn.label}}
          </span>
        </div>
      </template>
    </el-table-column>
  </el-table>
</template>
<script>
export default {
  props:['modelData',"listData","readonly"],
  components: {},
  name: "",
  data() {
    return {

    };
  },
  computed:{
    getModelData(){
      return this.modelData||[]
    },
    getListData(){
      let result=[]
      this.listData.forEach((ele,index)=>{
        if(ele.children&&ele.children.length>0){
          ele.children.forEach((ele1,index1)=>{
            if(index1===0)ele1.rowspan=ele.children.length
            result.push({...ele,...ele1,index0:index+"_"+index1})
          })
        }else{
          ele.rowspan=1
          ele.index0=index+"_-1"
          result.push(ele)
        }
      })
      return result
    }
  },
  methods: {
    objectSpanMethod({ row, column, rowIndex, columnIndex }){
      if (columnIndex===0) {
        return {
          rowspan: row.rowspan||0,
          colspan: 1
        };
      }
    },

    /**
     * @name 执行点击操作
     */
    doClick(btn,scope){
      if(btn.click)btn.click(scope,btn)
    },
  },
  created() {}
};
</script>
<style lang="scss" scoped>
.version-table {
  margin-left: 20px;
}
</style>